<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建一个点击可以显示/隐藏子节点的树形菜单：
    点击具有子节点的节点标题，可以显示/隐藏子节点。
    要求：
    只能有一个事件处理程序（使用委托）。
    对节点标题以为（在空白处）的点击不会做任何处理。 -->
    <ul>
        <li data-toggle-id="1">Animals
            <ul id="1" >
                <li data-toggle-id="11">Mammals
                    <ul id="11" >
                        <li>Cows</li>
                        <li>Donkey</li>
                        <li>Dogs</li>
                        <li>Tigers</li>
                    </ul>
                </li>
                <li data-toggle-id="12">Other
                    <ul id="12">
                        <li>Snakes</li>
                        <li>Birds</li>
                        <li>Lizards</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-toggle-id="2" >Fishes
            <ul id="2">
                <li data-toggle-id="21">Aquarium
                    <ul id="21">
                        <li>Guppy</li>
                    </ul>
                </li>
            </ul>
        </li>
       
    </ul>
    <script>
             document.body.onclick = function(event) {
            let target = event.target;
            if (target.dataset.toggleId !== '') {
                let item = document.getElementById(target.dataset.toggleId);
                if (item) {
                    item.hidden = !item.hidden;
                }
            }
        }
    </script>
</body>
</html>